
<template>
    <div class="port-page">
      <!-- 操作按钮 -->
    <router-link to="/home">
            <el-button type="warning" size="small"   style='margin-left: 5px; margin-top:10px;'  icon="el-icon-menu">首页</el-button>
    </router-link>
    <router-link :to="{path:'/educa/course',query: {iid:this.$route.query.iid,bjmc:this.$route.query.bjmc,frompage:'xsadd'}}">
            <el-button type="primary" size="small" class="aa" >列表模式</el-button>
    </router-link>
            <!--<el-button type="success" size="small" class="bb"  @click='componentsShow("add")' icon="el-icon-edit">重置课表</el-button>-->
      <!-- 日历表 -->
        <div id="calendar"></div>
      <!-- 课表信息 -->
        <el-dialog class="arr" title="课表信息" :modal-append-to-body="false" :visible.sync="outerVisible">
          <el-form label-width="100px" class="form">
            <el-form-item label="班级名称">
              <el-input v-model="vbjmc" class="select-block"  icon="add" ></el-input>
            </el-form-item>
            <el-form-item label="教室名称">
              <el-input v-model="vjsmc" class="select-block"  icon="add" ></el-input>
            </el-form-item>
            <el-form-item label="时间">
              <el-input v-model="vsj" class="select-block"  icon="add" ></el-input>
            </el-form-item>
            <el-form-item label="上课信息">
              <el-input v-model="vbt" class="select-block"  icon="add" ></el-input>
            </el-form-item>
            <el-button size="small" type="primary" @click="up(vid)">向上顺延</el-button>
            <el-button size="small" type="primary" @click="down(vid)">向下顺延</el-button>
            <el-button size="small" type="primary" @click="supplyCourse(vjsmc,vid)">代课</el-button>
            <!-- 代课 -->
            <el-dialog    title="代课"    :append-to-body="true"     :visible.sync="dialogVisible"   >
                <el-form ref="form" :model="form" label-width="100px" class=" form" label-position="center">
                    <el-form-item label="教室名称" >
                        <el-input disabled v-model="form.classroomName"class="select-block"></el-input>
                    </el-form-item>
                    <el-form-item label="选择老师" >
                        <el-select v-model="lsmc" placeholder="请选择老师"class="select-block" >
                            <el-option :label="v.mc" :value="v.id" v-for="v in lsboxlist"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="代课描述" class="select-block">
                        <el-input type="textarea" v-model="form.intro" :rows="3"class="select-block"></el-input>
                    </el-form-item>
                </el-form>
                <el-button type="primary" class="submit" @click="submit">确认</el-button>
            </el-dialog>
        </el-form>

        </el-dialog>
        <AddComponent v-if="portComponents.add.toggle" @close="componentsHide"  ></AddComponent>

    </div>
</template>
<script>
import qs from 'qs'
    import AddComponent from './add'
    import { mapState } from 'vuex'
    import moment from 'moment';
    // import './zh-cn'
    export default {
      components: { AddComponent},
        data () {
            return {
              vbjmc:'',
              vbt:'',
              vsj:'',
              vjsmc:'',
              vid:'',
              lsmc:'',
              outerVisible:false,
              dialogVisible: false,
              lsboxlist:[],
              kblist:[],
              form: {
                  classroomName: '',
                  classroomID: '',
                  intro: '',
                  teachers: '',
              },
              portComponents: {
                  /* 添加 */
                  add: {
                      type: 'add',
                      toggle: false,
                      params: '',
                      data: {}
                  },
                }
            }
        },
        created () {
            this.$store.dispatch('changeTitle','班级课表');//修改title
            this.$store.dispatch('changeRouterIndex','/educa/banji');//修改路由
            this.arr()
        },

        methods: {

          arr(){
            var time = this.$.getLocalTime(new Date().getTime())
            var logininfo = JSON.parse(localStorage.logininfo);
            var ae = this
            $(function(){
                $('#calendar').fullCalendar({
                  // alert(ae.$route.query.iid)
                  // innerVisible:false,
                  arr :ae.$route.query.iid,
                  height:700,
                  header: {
                    // left: 'prevYear,prev,today,next,nextYear',
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                    // right: 'month,agendaWeek,agendaDay,listWeek'
                  },
                  defaultDate: time,
                  navLinks: true, // can click day/week names to navigate views
                  editable: true,
                  eventLimit: true, // allow "more" link when too many events

                  events:  {
                      url: ae.$store.state.api+'/pk/bjkblist',
                      type: 'get',
                      data: {
                          yhid:logininfo.id+'',
                          xxid:logininfo.xxid+'',
                          bjid:ae.$route.query.iid,
                       },
                      error: function() {
                          this.$message.warning('数据获取失败!');
                      },
                      // color: 'yellow',   // a non-ajax option
                      // textColor: 'black' // a non-ajax option
                  },
                  //获取点击的时间
                  dayClick : function(date, allDay, jsEvent, view) {
                      var selDate = date.format();// 获取当前点击日期
                      // $("#datetimepicker").val(selDate);
                      // $("#taskModal").modal();
                      // alert(selDate)
                  },
                  eventClick : function(event, jsEvent, view) {
                    if(event.backgroundColor == 'red'){
                      // alert(234)
                    }else{
                      ae.outerVisible = true
                      ae.vbt = event.title
                      ae.vbjmc = event.bjmc
                      ae.vjsmc = event.jsmc
                      ae.vsj = event.sj
                      ae.vid = event.id
                    }

                    console.log(event)
                    console.log(jsEvent)
                    console.log(view)
                    // alert(this.outerVisible)
                    // alert(export)
                    // this.outerVisible = true
                      // var selDate = date.format();// 获取当前点击日期
                      // $("#datetimepicker").val(selDate);
                      // $("#taskModal").modal();
                      // alert(event.title)
                      // console.log(event.title)
                      // console.log(jsEvent)
                      // console.log(event,jsEvent,view)
                  },
                });
              })

          },
          up (scope) {
             var params2 = qs.stringify({
                      id: scope,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/up',  params2 )
                 .then(res => {
                 console.log(res)
                  if (res.data.code == 1) {
                      this.getCourseList()
                  }
                 }).catch(res => {
					 console.log(res)
				})
          },
          down (scope) {
          	var params2 = qs.stringify({
                      id: scope,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/down',  params2 )
                 .then(res => {
                 console.log(res)
                  if (res.data.code == 1) {
                      this.getCourseList()
                  }
                 }).catch(res => {
					 console.log(res)
				})

          },
          supplyCourse(jsmc,jsid) {

              this.dialogVisible = true;
              this.form.classroomName = jsmc;
              this.form.classroomID = jsid
              this.ls();
          },
          submit () {
          	 this.dialogVisible = false;
             var params2 = qs.stringify({
                      id: this.form.classroomID,
                      dkls: this.lsmc,
                      ms: this.form.intro,
                      // dklsgh:v.gh,
               })
             //执行
                 this.axios.post(this.$store.state.api + 'pk/update',  params2 )
                 .then(res => {
                // this.dialogVisible = false;
                  this.outerVisible = false,
                  console.log(res)
                 }).catch(res => {
					 console.log(res)
				})
          },
          ls () {
          	var logininfo = JSON.parse(localStorage.logininfo);
             var params2 = qs.stringify({
                      yhid: logininfo.id,
                  xxid: logininfo.xxid
               })
             //执行
                 this.axios.post(this.$store.state.api + 'ls/getlslist',  params2 )
                 .then(res => {
                 let data = res.data.data.list;
                  this.lsboxlist = data;
                 }).catch(res => {
				})

          },
          componentsShow (type) { //显示组件
          this.portComponents.add.toggle = true
          },
          componentsHide (setting) { //关闭组件
            this.portComponents.add.toggle = false
          }
        },
        mounted () {

        },

        computed: {
            ...mapState([
                'api'//域名
            ]),
            multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
        }
    }
</script>

<style lang="less" scoped>
/*div{color:red}*/
.port-page{
  position: relative;
  #calendar{
    width: 80%;
    height: 80%;
    margin-top: -33px;
    margin-left:  100px;
  }
  .aa{
    position: absolute;
    top: 55px;
    left:  0px;
  }
  .bb{
    position: absolute;
    top: 10px;
    left:  300px;
  }
}

.fc-grid .fc-day-number{padding: 0 2px; position:relative}
.fc-grid .fc-day-number span.solarday{float:right;color:#999}
.fc-grid .fc-day-number span.holiday{position:absolute; left:40%}
</style>
